<template>
  <div class="list">
    <article>
      <p>
        <input
          @change="checkAllChange"
          :checked="checkAll"
          type="checkbox"
          name=""
          id=""
        />全选
      </p>
      <p @click="removeCheck" style="color:rgb(20, 136, 10);">删除选中</p>
    </article>
    <div v-for="(v, i) in obj" :key="i" class="card">
      <ul>
        <h2>{{ v.name }}</h2>
        <li>订单价格：{{ v.price }}元</li>
        <li>
          <span>{{ v.subscribe }}</span>
          <input
            @click="v.checked = !v.checked"
            :checked="v.checked"
            type="checkbox"
            name=""
            id=""
            v-if="v.checkedS == 'all'"
          />
          <button v-else @click="ChangeStateValue(v)">
            {{ btnValue(v.state) }}
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
  props: { obj: Object },
  setup(props, { emit }) {
    //   全选的状态
    let checkAll = ref(false);

    console.log(props.obj);
    // 全选的状态
    function checkAllChange(e) {
      emit("checkAllChange", e.target.checked);
    }

    // 按钮的状态
    const btnValue = (value) => {
      const actions = ["付款", "发货", "收货", "再来一单"];
      return actions[value];
      
      // console.log(arr);
      // if (value == 0) {
      //   return "付款";
      // } else if (value == 1) {
      //   return "发货";
      // } else if (value == 2) {
      //   return "收货";
      // } else if (value == 3) {
      //   return "再来一单";
      // }

      // switch (value) {
      //   case 0:
      //     return "付款";
      //     break;
      //   case 1:
      //     return "发货";
      //     break;
      //   case 2:
      //     return "收货";
      //     break;
      //   case 3:
      //     return "再来一单";
      //     break;
      //   default:
      // }
    };
    // 改变状态
    function ChangeStateValue(i) {
      console.log(i);

      emit("ChangeStateValue", i);
    }
    // 监听选中的状态
    watch(
      () => props.obj,
      (data) => {
        let falg = props.obj.every((value) => value.checked);
        if (props.obj.length != 0 && falg) {
          // 判断一下删除全部 以后把全选选中去掉
          checkAll.value = true;
        } else {
          checkAll.value = false;
        }
        console.log(data);
      },
      { deep: true, immediate: true }
    );
    // 删除监听
    function removeCheck() {
      emit("removeCheck");
    }

    return {
      checkAllChange,
      checkAll,
      removeCheck,
      btnValue,
      ChangeStateValue,
    };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  padding: 10px;
  .card {
    width: 100%;
    height: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 10px 0;
    ul {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}
input {
  width: 25px;
  height: 25px;
}
article {
  display: flex;
  width: 100%;
  height: 30px;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
}
</style>
